/**
 * 看板数据刷新相关
 */
import { mapState } from 'vuex';
export default {
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      'bgColorList': state => state.options.bgColorList
    })
  },
  methods: {
    getModuleStyle(item) {
      let styleObj = {};
      const styleConfig = this.getInfo(item, 'styleConfig') || '';
      if (styleConfig && styleConfig instanceof Object) {
        // 这里需要用到背景（moduleBackground）和边框（moduleBorder）
        const moduleBackground = styleConfig.moduleBackground || {};
        const moduleBorder = styleConfig.moduleBorder || {};
        styleObj = { ...moduleBackground, ...moduleBorder };
        styleObj.borderWidth = styleObj.borderWidth + 'px';
        styleObj.borderStyle = 'solid';
        // 填充背景
        if (styleObj.isGradient) {
          styleObj.backgroundImage = this.getColor(styleObj.gradientColor);
        } else if (styleObj.backgroundImage && styleObj.backgroundImage.indexOf('linear-gradient') < 0) {
          styleObj.backgroundImage = `url(${styleObj.backgroundImage})`;
          if (styleObj.size === 'stretch') {
            styleObj.backgroundSize = '100% 100%';
            styleObj.backgroundRepeat = 'no-repeat';
          } else if (styleObj.size === 'tile') {
            styleObj.backgroundRepeat = 'repeat';
          } else if (styleObj.size === 'center') {
            styleObj.backgroundRepeat = 'no-repeat';
            styleObj.backgroundPosition = 'center center';
          }
        }
      }
      if (this.getInfo(item, 'kind') === 3) styleObj.overflow = 'unset';
      if (this.chartConfig.moduleRadius || this.chartConfig.moduleRadius === 0) {
        styleObj.borderRadius = `${this.chartConfig.moduleRadius}px`;
      } else {
        styleObj.borderRadius = '10px';
      }
      if (this.getInfo(item, 'kind') === 6) styleObj.border = 'none'; // 用户/待办/快捷/公告模块不用边框
      return styleObj;
    },
    getColor(colorId) {
      const item = this.bgColorList.find(i => i.id === colorId);
      const colors = item ? item.colors : this.bgColorList[0].colors;
      if (!colors || colors.length !== 2) {
        return '';
      }
      return `linear-gradient(to top left, ${colors[0]}, ${colors[1]})`;
    }
  }
};
